<template>
  <div class="info" v-if="list && list.length">
    <header class="info-header">
      <nav class="common-nav info-header__nav mb20">
        <h2
          class="common-nav__title"
          :class="index === activeIndex ? 'tab_active' : ''"
          v-for="(item, index) in list"
          :key="index"
          @click="swtichNav(item, index)"
        >
          {{ item.name }}
        </h2>
        <el-button class="info-header__nav--btn" size="small" type="primary" @click="editProduct()">编辑产品</el-button>
      </nav>
    </header>
    <main class="info-container">
      <section class="info-container__top mb20">
        <h6 class="info-container__title">资金方信息</h6>
        <section class="info-container__content">
          <p>资金方名称：{{ itemDetail.fundName }}</p>
          <p>资金方编码：{{ itemDetail.fundCode }}</p>
        </section>
      </section>
      <section class="info-container__bottom">
        <h6 class="info-container__title">配置信息</h6>
        <section class="info-container__content">
          <p>名称：{{ itemDetail.name }}</p>
          <p class="rate">推荐星级：<el-rate v-model="itemDetail.recommendStar" disabled></el-rate></p>
          <p v-if="itemDetail.quota">额度上限：{{ itemDetail.quota | separatorMoney }}元</p>
          <p v-else>额度上限：--元</p>
          <p>最长贷款周期：{{ itemDetail.deadLine }}{{ itemDetail.deadLineType === '0' ? '个月' : '日' }}</p>
          <p>还款方式：{{ itemDetail.repayMethod }}</p>
          <p>年化利率：{{ itemDetail.interestRate }}%</p>
          <p>最低利率：{{ itemDetail.interestRate }}%</p>
          <p>结息日：{{ itemDetail.interestDate }}{{ itemDetail.interestDateType === '0' ? '月' : '日' }}</p>
          <p>授信有效期：{{ itemDetail.creditIndate }}年</p>
        </section>
        <div class="product-detail">
          产品详情：
          <p class="mt10" v-html="itemDetail.productDetail"></p>
        </div>
      </section>
      <div class="spaceLine"></div>
      <section class="bottomItem">
        <h6 class="info-container__title">折扣配置</h6>
        <div class="bottomBtn">
          <el-button size="small" type="primary" @click="editRate('', 0)">新增</el-button>
        </div>
        <BaseTable :columns="columns" v-bind="rateTable"></BaseTable>
      </section>
      <AddEditRate
        :itemData="itemData"
        :popData.sync="popData"
        :isShow.sync="isShowRatePop"
        :title="title"
        @updateFormSubmit="updateFormSubmit"
      ></AddEditRate>
    </main>
  </div>
</template>

<script>
import BaseTable from '@/components/BaseTable/index.vue'
import { ORDER_STATUS_RATE } from '@/constants/auditModel.js'
import AddEditRate from './AddEditRate.vue'
export default {
  name: 'ProductInfo',
  components: {
    BaseTable,
    AddEditRate,
  },
  props: {
    productSetCode: {
      type: String,
    },
  },
  data() {
    return {
      activeIndex: 0,
      list: [],
      itemDetail: {},
      columns: [
        { label: '企业', prop: 'corpName' },
        { label: '统一信用代码', prop: 'uscCode' },
        { label: '折扣(%)', prop: 'discount' },
        { label: '资金方', prop: 'fundName' },
        {
          label: '状态',
          prop: 'type',
          render: (val, row) => {
            return <span>{ORDER_STATUS_RATE[row.type]}</span>
          },
        },
        {
          label: '操作',
          render: (val, row) => {
            return (
              <div>
                <el-button
                  type="text"
                  onClick={() => {
                    this.editRate(row, 1)
                  }}>
                  编辑
                </el-button>
                <el-button
                  type="text"
                  onClick={() => {
                    this.deldetailData(row)
                  }}>
                  删除
                </el-button>
              </div>
            )
          },
        },
      ],
      table: {
        pagination: {
          pageNo: 1,
          pageSize: 10,
          total: 0,
        },
        data: [],
        onChange: pagination => {
          if (!this.form.uscCode) {
            this.$message.warning('请输入搜索条件')
            return
          }

          Object.assign(this.table.pagination, pagination)
          // this.isInit++
          this.getListRequest(this.table.pagination)
        },
      },
      rateTable: {
        pagination: {
          pageNo: 1,
          pageSize: 10,
          total: 0,
          productCode: '',
          fundCode: '',
        },
        data: [],
        onChange: pagination => {
          // if (!this.form.uscCode) {
          //   this.$message.warning('请输入搜索条件')
          //   return
          // }

          Object.assign(this.rateTable.pagination, pagination)
          // this.isInit++
          this.getDetailRateRequest(this.table.pagination)
        },
      },
      isShowRatePop: false,
      title: '',
      itemData: '',
      productId: '',
      popData: {},
    }
  },
  methods: {
    async swtichNav(item, index) {
      if (this.activeIndex === index) return
      this.activeIndex = index
      this.productId = item.id
      await this.getDetailRequest(item.id)
    },
    editProduct() {
      this.$router.push({
        name: 'productList',
        query: { productSetCode: this.productSetCode, productSetId: this.$route.query.productSetId },
      })
    },
    editRate(data, type) {
      this.isShowRatePop = true
      this.itemData = JSON.stringify(data)
      this.popData = {
        fundCode: this.detailData.fundCode,
        productCode: this.detailData.productCode,
        appCode: this.detailData.appCode,
      }
      this.title = type ? '编辑' : '新增'
    },
    async getDetailRequest(productId) {
      const res = await this.$http.get(`/products/${productId}`)
      this.itemDetail = res || {}
      this.rateTable.pagination.productCode = res.productCode
      this.rateTable.pagination.fundCode = res.fundCode
      this.detailData = { ...res }

      // console.log('data===', this.popData)
      this.getDetailRateRequest()
    },
    async getDetailRateRequest() {
      const res = await this.$http.post('/products/queryFundDiscount/', this.rateTable.pagination)
      this.rateTable.data = res.records
      this.rateTable.pagination.total = res.total
    },
    async getProductSetDetailRequest() {
      const res = await this.$http.get(`/product_sets/${this.$route.query.productSetId}`)
      this.list = res.relationProducts || []
      if (this.list.length) {
        await this.getDetailRequest(this.list[0].id)
      }
    },
    deldetailData(data) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          const obj = {
            uscCode: data.uscCode || '',
            fundCode: this.itemDetail.fundCode || '',
            productCode: this.itemDetail.productCode || '',
          }
          console.log('data===', obj)
          await this.$http.post('/products/removeDiscont/', obj)
          this.getDetailRequest(this.productId)
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
        })
        .catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // });
        })
    },
    updateFormSubmit(value) {
      console.log('2222')
      // if (value) {
      this.getDetailRequest(this.productId)
      // }
      // this.getProductSetDetailRequest()
    },
  },
  mounted() {
    this.getProductSetDetailRequest()
  },
}
</script>

<style lang="scss" scoped>
.info {
  position: relative;
  &-header {
    &__nav {
      > h2 {
        @include ellipsis();
      }
      &--btn {
        position: absolute;
        right: 0;
        top: -5px;
      }
    }
  }
  &-container {
    &__title {
      color: $gray;
      font-size: $f-s-16;
      margin-bottom: 24px;
    }
    &__content {
      @include flex();
      flex-wrap: wrap;
      > p {
        width: 50%;
        color: $gray;
        font-size: $f-s-16;
        margin-bottom: 10px;
      }
    }
    .product-detail {
      color: $gray;
      font-size: $f-s-16;
    }
  }
  .bottomItem {
    h6 {
      width: 80%;
      display: inline-block;
    }
    .bottomBtn {
      display: inline-block;
      text-align: right;
      width: 20%;
    }
  }
}
.rate {
  display: flex;
}
.img {
  display: flex;
  align-items: center;
}
.spaceLine {
  height: 5px;
  display: block;
  background: #eeeeee;
}
</style>
